<template>
  <div class="menu">
    <div class="item">
      <h3>新闻1</h3>
      <div class="itemBox">
        <ul>
          <li>内容1</li>
          <li>内容2</li>
          <li>内容3</li>
          <li>内容4</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <h3>新闻2</h3>
      <div class="itemBox">
        <ul>
          <li>内容1</li>
          <li>内容2</li>
          <li>内容3</li>
          <li>内容4</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <h3>新闻3</h3>
      <div class="itemBox">
        <ul>
          <li>内容1</li>
          <li>内容2</li>
          <li>内容3</li>
          <li>内容4</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <h3>新闻4</h3>
      <div class="itemBox">
        <ul>
          <li>内容1</li>
          <li>内容2</li>
          <li>内容3</li>
          <li>内容4</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  components: {},
  props: {},
  mounted() {},
  computed: {},
  watch: {},
  methods: {},
  destroyed() {},
};
</script>
<style>
* {
  padding: 0px;

  margin: 0px;

  list-style: none;
}

.menu {
  position: absolute;

  top: 100px;

  left: 550px;

  cursor: pointer;
}

.item {
    
  width: 200px;

  background: #e6f3ae;

  height: 0%;

  transition: all 0.5s ease-in;

  overflow: hidden;
}

.item h3 {
  background: #6ce7df;

  color: #e09b44;

  line-height: 40px;

  font-weight: bold;

  text-align: center;

  margin-bottom: 1px;
}

.itemBox {
  width: 200px;

  height: 0;

  text-align: center;

  font-size: 14px;
  /* display: none; */
  transition: all 1.5s ease-in;
  /* opacity: 0; */
}

.item:hover {
    /*  */
  /* height: 100%; */
}
.item:hover .itemBox{
  display: block;
  height: 100%;
  /* height: auto; */
  /* opacity: 1; */
}
</style>

